<template>
  <div class="brand">
    <el-card>
      <div class="brand-search">
        <el-form ref="form" :inline="true" label-width="130px" :model="form">
          <el-form-item label="品牌名称：">
            <el-input v-model="form.BRAND_NAME" />
          </el-form-item>
          <el-form-item label="品牌编号：">
            <el-input v-model="form.BRAND_ID" />
          </el-form-item>
          <el-form-item>
            <el-button @click="reset">
              <vui-icon icon="refresh-line" />
              重置
            </el-button>
            <el-button type="primary" @click="query">
              <vui-icon icon="search-line" />
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="brand-table">
        <div class="btns">
          <el-button type="primary" @click="addBrand">
            <vui-icon icon="add-line" />
            新增品牌
          </el-button>
        </div>
        <el-table border :data="list" highlight-current-row>
          <el-table-column label="品牌编号" prop="BRAND_ID" width="100" />
          <el-table-column label="品牌名称" prop="BRAND_NAME" />
          <el-table-column label="品牌英文名" prop="BRAND_NAMEE" />
          <el-table-column label="自定义1" prop="UDF1" />
          <el-table-column label="自定义2" prop="UDF2" />
          <el-table-column label="自定义3" prop="UDF3" />
          <el-table-column label="创建人员" prop="ADDWHO" />
          <el-table-column label="创建时间" prop="ADDTIME" />
          <el-table-column label="修改人员" prop="EDITWHO" />
          <el-table-column label="修改时间" prop="EDITTIME" />
          <el-table-column fixed="right" label="操作" width="130">
            <template #default="{ row }">
              <el-button type="text" @click="editor(row)">
                <vui-icon icon="edit-line" />
                编辑
              </el-button>
              <el-button type="text" @click="dele(row)">
                <vui-icon icon="close-circle-line" />
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage"
          layout="total, prev, pager, next, jumper"
          :page-size="size"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <el-dialog v-model="addVisible" :title="title" width="50%">
      <brand-dialog v-if="addVisible" @success="success" />
    </el-dialog>
    <el-dialog v-model="editorVisible" :title="title" width="50%">
      <brand-dialog v-if="editorVisible" :brand-one-id="brandOneId" @success="success" />
    </el-dialog>
  </div>
</template>
<script>
  import requestMethod from '../../common/requestMethod'
  import publicFn from '../../common/requestCommon'
  import BrandDialog from '../../components/brandDialog.vue'
  export default {
    name: 'Brand',
    components: {
      BrandDialog,
    },
    data() {
      return {
        title: '新增品牌',
        form: {},
        list: [],
        size: 10,
        total: 0,
        currentPage: 1,
        addVisible: false,
        editorVisible: false,
        brandOneId: '',
        srcArr: [],
        typeOptions: [],
        props: {
          emitPath: false, //绑定的内容只获取最后一级的value值。
        },
      }
    },
    created() {
      this.getTypeList()
    },
    activated() {
      this.list = []
      this.form = {}
    },
    methods: {
      reset() {
        this.form = {}
        this.query()
      },
      async getTypeList() {
        let res = await publicFn(requestMethod.TYPE_LIST, { '#LIMIT#': 1, '#PAGE_SIZE#': 99999 })
        console.log(res)
        if (res.code === '00000') {
          this.srcArr = res.data[requestMethod.TYPE_LIST].data
          res.data[requestMethod.TYPE_LIST].data.forEach((item) => {
            if (item.PARAENT_TYPE_ID == 0) {
              this.typeOptions.push({
                parentId: item.PARAENT_TYPE_ID,
                value: item.TYPE_ID,
                label: item.TYPE_NAME,
                children: [],
              })
            }
          })
          this.typeOptions.forEach((it) => {
            it.children = this.getChildren(it.value, this.srcArr)
          })
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      // 处理级联--递归
      getChildren(tId, srcArr) {
        let children = []
        srcArr.forEach((item) => {
          if (item.PARAENT_TYPE_ID == tId) {
            children.push({
              parentId: item.PARAENT_TYPE_ID,
              value: item.TYPE_ID,
              label: item.TYPE_NAME,
              children: [],
            })
          }
        })
        if (children.length == 0) {
          return null
        }
        children.forEach((item) => {
          item.children = this.getChildren(item.value, this.srcArr)
        })
        return children
      },
      async getBrandList() {
        let res = await publicFn(requestMethod.BRAND_LIST, { ...this.form, '#LIMIT#': this.currentPage, '#PAGE_SIZE#': this.size })
        if (res.code === '00000') {
          this.total = res.data[requestMethod.BRAND_LIST].count
          this.list = res.data[requestMethod.BRAND_LIST].data
        } else {
          this.$message({
            type: 'info',
            message: res.msg,
          })
        }
      },
      addBrand() {
        this.addVisible = true
      },
      query() {
        this.getBrandList()
      },
      success() {
        this.addVisible = false
        this.editorVisible = false
        this.query()
      },
      handleCurrentChange(val) {
        this.currentPage = val
        this.query()
      },
      dele(row) {
        this.$confirm('此操作将删除该品牌, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            let res = await publicFn(requestMethod.BRAND_DELETE, { BRAND_ID: row.BRAND_ID })
            console.log(res)
            if (res.code === '00000') {
              this.query()
            } else {
              this.$message({
                type: 'info',
                message: res.msg,
              })
            }
          })
          .catch((e) => {
            console.log(e)
          })
      },
      editor(row) {
        this.brandOneId = row.BRAND_ID
        this.editorVisible = true
        this.title = '编辑品牌'
      },
    },
  }
</script>
<style lang="scss" scoped>
  .brand {
    padding: 15px;
    box-sizing: border-box;
    .brand-search,
    .brand-table {
      border: 1px solid #f5f5f5;
    }
    .brand-table {
      margin-top: 20px;
      .btns {
        padding: 0 0 15px 0;
        box-sizing: border-box;
      }
    }
  }
</style>
